07 Resolvendo o FOUC (Flash of Unstyled Content)

Transcrição

É o momento de revelarmos um segredo: nosso projeto tem um pequeno problema que pode ter passado despercebido. Se recarregarmos a página no navegador, ela será exibida sem o estilo carregado nos instantes iniciais.

Isto ocorre devido ao fouc, (flash of unstyled content, ou seja, flash de um conteúdo não estilizado), o que não deveria acontecer em uma aplicação. O problema é que se analisarmos o arquivo bundle.js da pasta dist, veremos que os arquivos CSS foram adicionados automaticamente. Todo arquivo CSS gerada, o Webpack agrupou em um único Bundle arquivos de diferentes extensões.

No caso, por meio do JS, o CSS foi adicionado como tag <style> do navegador. Se insecionarmos a página, encontraremos os arquivos CSS inline, como o style do bootstrap.css. Em um único bundle.js, ele colocou todos os arquivos empacotados juntos.

inspect aberto no navegador

O CSS será aplicado pelo JavaScript, a menos que este adicione dinamicamente a string (que é um CSS) incluindo a tag <style> no navegador. Esse processo pode demorar e, por isso, o usuário vê o flash of Unstyled Content. Um especialista em Front-end poderia desistir de usar o Webpack, porque o navegador consegue carregar os arquivos CSS usando a tag link. Existem diversas otimizações que gostaríamos de aproveitar.

Nós temos que instruir o Webpack para que ele trabalhe nesse sentido, sem adicionar o CSS do bundle.js. A solução é deixar os arquivos separados, como style.css, com todos estilos concatenados. Em seguida, podemos importá-lo na página e usufruir do carregamento rápido.

O próximo passo será adicionar uma tag <link> dentro do index.html e apontaremos dist/style.css - que geraremos a seguir.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">    
    <title>Negociações</title>
    <link rel="stylesheet" href="dist/styles.css">
</head>

Porém, durante o processo de build, o Webpack conseguirá separá-los, deixando os arquivos JavaScript dentro do bundle.js. Desta forma, resolveremos com o FOUC. Após adicionarmos <link>, acessaremos o Terminal para instalar o extract-text-webpack-plugin: 

npm install extract-text-webpack-plugin@3.0.0 --save-dev

Você deve utilizar a mesma versão usada no curso, porque as anteriores vão ter bugs com o Webpack 3, no qual os CSS serão carregados na ordem contrária.

O próximo passo será fazer a configuração no webpack.config.js, importando extractTextPlugin:

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');

O plugin será usado tanto em desenvolvimento como em produção, por isso, ele será o primeiro a ser listado na lista.

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');

let plugins = []

// ADICIONANDO O PLUGIN,
// MAIS ABAIXO, MODIFICAÇÃO DO LOADER

plugins.push(
    new extractTextPlugin("styles.css")
);

Adicionamos o extractTextPlugin() e passamos como parâmetro styles.css. Porém, isso não é o suficiente, teremos que alterar um dos loaders padrões do CSS, localizado no seguinte trecho: 


module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "dist"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }, 
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },

 //...

Na linha loader: 'style-loader!css-loader', substituiremos o loader por chave use. Nós vamos usar o extractTextPlugin.extract(). Ele receberá um objeto JavaScript, em que passaremos o fallback informaremos qual loader será usado em casos de falha, além disso, especificaremos o loader padrão no use. 

 test: /\.css$/,
 use: extractTextPlugin.extract({
     fallback: 'style-loader',
     use: 'css-loader'
 })

Nosso use é o resultado do extractTextPlugin, em caso de falha será usado style-loader, se tudo funcionar corretamente css-loader.

Em seguida, usaremos o comando npm run build-dev no Terminal, dentro da pasta dist, ele criará o styles.css. Depois, como comando npm start, a aplicação funcionará corretamente. Se abrirmos o código fonte da página, ele acessará dist/styles.css, arquivo criado recentemente.

Quando fazemos o build, ele vai gerar o arquivo separado.

Tirar dúvida Próxima Atividade